<template>
    <el-card>
        班期管理
    </el-card>
    <el-card class="table">
        <div class="filter-section">
            <el-date-picker v-model="queryParams.enrollTime" type="daterange" range-separator="至" start-placeholder="招生时间"
                end-placeholder="招生时间" :size="size" class="filter" @change="getClassListFn" />
            <el-input v-model="queryParams.className" placeholder="请输入班期名称" clearable style="width: 500px;" @change="getClassListFn"></el-input>
        </div>
        <el-table table-wrapper v-loading="loading" :data="classList">
            <el-table-column fixed="left" label="招生时间" width="200">
                <template #default="{ row }">
                    {{ formatTime(row.enrollTime[0]) }}
                    <div style="text-align: center; width: 80%;">至</div>
                    {{ formatTime(row.enrollTime[1]) }}
                </template>
            </el-table-column>
            <el-table-column prop="className" label="班期名称" width="200" />
            <el-table-column prop="liveList" label="直播数量" width="200">
                <template #default="{ row }">
                    {{ row.liveList.liveList.length }}
                </template>
            </el-table-column>
            <el-table-column prop="studentNum" label="学员人数" width="200" />
            <el-table-column prop="updatePeople" label="更新人" width="200" />
            <el-table-column label="更新时间" width="200">
                <template #default="{ row }">
                    {{ formatTime(row.updateTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
                <template #default="{ row }">
                    <el-button size="small" disabled>编辑班期</el-button>
                    <el-button size="small" v-if="row.className === 'web前端进阶框架-大炮'" @click="openAddLive(row)">新增直播</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="queryParams.currentPage" v-model:page-size="queryParams.pageSize"
            :page-sizes="[5, 10, 50]" layout="sizes, prev, pager, next,total,jumper" prev-text="上一页" next-text="下一页"
            :total="total" @size-change="getClassListFn" @current-change="getClassListFn" class="pagination" />
    </el-card>
    <AddLive ref="addLiveRef"  @change="getClassListFn"></AddLive>
</template>

<script setup>
import { ref } from 'vue'
import { getClassList } from '@/apis/class'
import { formatTime } from '@/utils/formmatTime'
import AddLive from './components/AddLive'
const queryParams = ref({
    enrollTime: '',
    currentPage: 1,
    pageSize: 5,
    className: ''
})
const total = ref(0)
const loading = ref(false)
const classList = ref([])
const getClassListFn = async () => {
    loading.value = true
    const { data } = await getClassList(queryParams.value)
    loading.value = false // 获取到数据加载动画消失
    classList.value = data.data
    total.value = data.total
}
getClassListFn()

// 新增直播
const addLiveRef = ref({})

// 打开新增直播抽屉
const openAddLive =  (row)=>{
    addLiveRef.value.open(row)
}

</script>


<style lang="scss" scoped>
.filter-section {
    display: flex;
}

</style>